<template>
  <div>
    <a-menu
      theme="dark"
      mode="inline"
      :openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      :style="{ height: '100%', borderRight: 0 }"
      @openChange="onOpenChange"
      @select="onSelect"
    >
      <a-menu-item key="index" title="主页">
        <div>
          <span><BarChartOutlined /><span>主页</span></span>
        </div>
      </a-menu-item>
      <a-sub-menu
        v-if="
          canViewSchool || canViewCollege || canViewTeam || canViewResearchGroup
        "
        key="unitManagement"
      >
        <template v-slot:title>
          <span><BankOutlined /><span>组织单位</span></span>
        </template>
        <a-menu-item v-if="canViewSchool" key="schoolInfo" title="学校信息">
          学校信息
        </a-menu-item>
        <a-menu-item v-if="canViewCollege" key="instituteInfo" title="学院信息">
          学院信息
        </a-menu-item>
        <a-menu-item v-if="canViewTeam" key="teamInfo" title="团队信息">
          团队信息
        </a-menu-item>
        <a-menu-item
          v-if="canViewResearchGroup"
          key="researchGroupInfo"
          title="课题组信息"
        >
          课题组信息
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu v-if="canViewSubject" key="subjectManagement">
        <template v-slot:title>
          <span><BulbOutlined /><span>课题管理</span></span>
        </template>
        <a-menu-item v-if="canViewSubject" key="subject" title="课题">
          课题
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu
        v-if="
          canViewExperiment ||
          canViewExperimentDesign ||
          canViewExperimentProcedure ||
          canViewAssay
        "
        key="experimentManagement"
      >
        <template v-slot:title>
          <span><ExperimentOutlined /><span>实验过程管理</span></span>
        </template>
        <!-- <a-sub-menu key="experimentInfoManagement" title="实验信息"> -->
        <a-menu-item
          v-if="canViewExperiment"
          key="experimentInfo"
          title="实验信息"
        >
          实验信息
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <!-- <a-sub-menu key="experimentDesignManagement" title="实验方案"> -->
        <a-menu-item
          v-if="canViewExperimentDesign"
          key="experimentDesign"
          title="实验方案"
        >
          实验方案
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <!-- <a-sub-menu key="experimentProcedureManagement" title="实验过程"> -->
        <a-menu-item
          v-if="canViewExperimentProcedure"
          key="experimentProcedure"
          title="实验过程"
        >
          实验过程
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <!-- <a-sub-menu key="assayManagement" title="分析检测"> -->
        <a-menu-item v-if="canViewAssay" key="assay" title="分析检测">
          分析检测
        </a-menu-item>
        <!-- </a-sub-menu> -->
      </a-sub-menu>
      <a-sub-menu
        v-if="
          canViewSample ||
          canViewMacroStructure ||
          canViewMicroStructure ||
          canViewChemicalProperty ||
          canViewPhysicalProperty ||
          canViewTensileMechanicalProperty ||
          canViewCompactionMechanicalProperty ||
          canViewShearProperty ||
          canViewBendingProperty ||
          canViewTorsionProperty ||
          canViewFractureProperty ||
          canViewFrictionAndWearProperty ||
          canViewHardness ||
          canViewServiceProperty
        "
        key="propertyManagement"
      >
        <template v-slot:title>
          <span><FireOutlined /><span>性能数据管理</span></span>
        </template>
        <!-- <a-sub-menu key="sampleInfoManagement" title="样品信息"> -->
        <a-menu-item v-if="canViewSample" key="sampleInfo" title="样品信息">
          样品信息
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <a-sub-menu
          v-if="canViewMacroStructure || canViewMicroStructure"
          key="morphologyManagement"
          title="组织形貌"
        >
          <a-menu-item
            v-if="canViewMacroStructure"
            key="macroMorphology"
            title="宏观形貌"
          >
            宏观形貌
          </a-menu-item>
          <a-menu-item
            v-if="canViewMicroStructure"
            key="microMorphology"
            title="微观组织"
          >
            微观组织
          </a-menu-item>
        </a-sub-menu>
        <!-- <a-sub-menu key="chemicalPropertyManagement" title="化学性能"> -->
        <a-menu-item
          v-if="canViewChemicalProperty"
          key="chemicalProperty"
          title="化学性能"
        >
          化学性能
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <!-- <a-sub-menu key="physicalPropertyManagement" title="物理性能"> -->
        <a-menu-item
          v-if="canViewPhysicalProperty"
          key="physicalProperty"
          title="物理性能"
        >
          物理性能
        </a-menu-item>
        <!-- </a-sub-menu> -->
        <a-sub-menu
          v-if="
            canViewTensileMechanicalProperty ||
            canViewCompactionMechanicalProperty ||
            canViewShearProperty ||
            canViewBendingProperty ||
            canViewTorsionProperty ||
            canViewFractureProperty ||
            canViewFrictionAndWearProperty ||
            canViewHardness
          "
          key="mechanicalPropertyManagement"
          title="力学性能"
        >
          <a-menu-item
            v-if="canViewTensileMechanicalProperty"
            key="tensileMechanicalProperty"
            title="拉伸力学性能"
          >
            拉伸力学性能
          </a-menu-item>
          <a-menu-item
            v-if="canViewCompactionMechanicalProperty"
            key="compactionMechanicalProperty"
            title="压缩力学性能"
          >
            压缩力学性能
          </a-menu-item>
          <a-menu-item
            v-if="canViewShearProperty"
            key="shearProperty"
            title="剪切性能"
          >
            剪切性能
          </a-menu-item>
          <a-menu-item
            v-if="canViewBendingProperty"
            key="bendingProperty"
            title="弯曲性能"
          >
            弯曲性能
          </a-menu-item>
          <a-menu-item
            v-if="canViewTorsionProperty"
            key="torsionProperty"
            title="扭转性能"
          >
            扭转性能
          </a-menu-item>
          <a-menu-item
            v-if="canViewFractureProperty"
            key="fractureProperty"
            title="断裂韧性"
          >
            断裂韧性
          </a-menu-item>
          <a-menu-item
            v-if="canViewFrictionAndWearProperty"
            key="frictionAndWearProperty"
            title="摩擦磨损性能"
          >
            摩擦磨损性能
          </a-menu-item>
          <a-menu-item v-if="canViewHardness" key="hardness" title="硬度">
            硬度
          </a-menu-item>
        </a-sub-menu>
        <!-- <a-sub-menu key="servicePropertyManagement" title="服役性能"> -->
        <a-menu-item
          v-if="canViewServiceProperty"
          key="serviceProperty"
          title="服役性能"
        >
          服役性能
        </a-menu-item>
        <!-- </a-sub-menu> -->
      </a-sub-menu>
      <a-sub-menu v-if="canViewAlloy" key="attachManagement">
        <template v-slot:title>
          <span><FileOutlined /><span>材料文件</span></span>
        </template>
        <a-menu-item v-if="canViewAlloy" key="alloyPhaseDiagram" title="合金">
          合金
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu
        v-if="canAuditExperiment || canAuditExperimentProcedure"
        key="audit"
      >
        <template v-slot:title>
          <span><AuditOutlined /><span>审核</span></span>
        </template>
        <a-menu-item
          v-if="canAuditExperiment"
          key="experimentInfoAudit"
          title="实验信息审核"
        >
          实验信息审核
        </a-menu-item>
        <a-menu-item
          v-if="canAuditExperimentProcedure"
          key="experimentProcedureAudit"
          title="实验过程审核"
        >
          实验过程审核
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu v-if="canViewUser || canViewUserGroup" key="userManagement">
        <template v-slot:title>
          <span><TeamOutlined /><span>用户管理</span></span>
        </template>
        <a-menu-item v-if="canViewUser" key="userInfo" title="用户信息">
          用户信息
        </a-menu-item>
        <a-menu-item v-if="canViewUserGroup" key="userGroup" title="用户组">
          用户组
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
import {
  BankOutlined,
  TeamOutlined,
  ExperimentOutlined,
  FileOutlined,
  AuditOutlined,
  FireOutlined,
  BulbOutlined,
  BarChartOutlined,
} from "@ant-design/icons-vue";

export default {
  name: "NavMenu",
  emits: ["select-item"],
  components: {
    BankOutlined,
    TeamOutlined,
    ExperimentOutlined,
    FileOutlined,
    BulbOutlined,
    AuditOutlined,
    FireOutlined,
    BarChartOutlined,
  },
  mounted() {
    this.processUnitManagementPermission();
    this.processSubjectManagementPermission();
    this.processExperimentManagementPermission();
    this.processPropertyManagementPermission();
    this.processAlloyMaterialPermission();
    this.processAuditPermission();
    this.processUserManagementPermission();
  },
  data() {
    return {
      rootSubmenuKeys: [
        "home",
        "unitManagement",
        "subjectManagement",
        "experimentManagement",
        "propertyManagement",
        "attachManagement",
        "userInfo",
      ],
      itemKeys: [
        "index",
        "schoolInfo",
        "instituteInfo",
        "teamInfo",
        "researchGroupInfo",
        "subject",
        "mySubject",
        "subjectExamine",
        "experimentInfo",
        "myExperimentInfo",
        "experimentInfoExamine",
        "experimentDesign",
        "myExperimentDesign",
        "experimentProcedure",
        "myExperimentProcedure",
        "experimentProcedureExamine",
        "assay",
        "myAssay",
        "sampleInfo",
        "mySampleInfo",
        "macroMorphology",
        "microMorphology",
        "chemicalProperty",
        "myChemicalProperty",
        "physicalProperty",
        "myPhysicalProperty",
        "tensileMechanicalProperty",
        "compactionMechanicalProperty",
        "shearProperty",
        "bendingProperty",
        "torsionProperty",
        "fractureProperty",
        "frictionAndWearProperty",
        "hardness",
        "serviceProperty",
        "myServiceProperty",
        "alloyPhaseDiagram",
      ],
      openKeys: ["home"],
      selectedKeys: [],
      userTableShow: true,

      canViewSchool: false,
      canViewCollege: false,
      canViewTeam: false,
      canViewResearchGroup: false,
      canViewSubject: false,
      canViewExperiment: false,
      canViewExperimentDesign: false,
      canViewExperimentProcedure: false,
      canViewAssay: false,
      canViewSample: false,
      canViewMacroStructure: false,
      canViewMicroStructure: false,
      canViewChemicalProperty: false,
      canViewPhysicalProperty: false,
      canViewTensileMechanicalProperty: false,
      canViewCompactionMechanicalProperty: false,
      canViewShearProperty: false,
      canViewBendingProperty: false,
      canViewTorsionProperty: false,
      canViewFractureProperty: false,
      canViewFrictionAndWearProperty: false,
      canViewHardness: false,
      canViewServiceProperty: false,
      canViewAlloy: false,
      canAuditExperiment: false,
      canAuditExperimentProcedure: false,
      canViewUser: false,
      canViewUserGroup: false,
    };
  },
  methods: {
    processUnitManagementPermission() {
      this.axios
        .get("/has_permission?permission=unit_management.view_school")
        .then((res) => {
          this.canViewSchool = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=unit_management.view_college")
        .then((res) => {
          this.canViewCollege = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=unit_management.view_team")
        .then((res) => {
          this.canViewTeam = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=unit_management.view_research_group")
        .then((res) => {
          this.canViewResearchGroup = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processSubjectManagementPermission() {
      this.axios
        .get("/has_permission?permission=subject_management.view_subject")
        .then((res) => {
          this.canViewSubject = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processExperimentManagementPermission() {
      this.axios
        .get("/has_permission?permission=experiment_management.view_experiment")
        .then((res) => {
          this.canViewExperiment = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=experiment_management.view_experiment_program"
        )
        .then((res) => {
          this.canViewExperimentDesign = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=experiment_management.view_experiment_procedure"
        )
        .then((res) => {
          this.canViewExperimentProcedure = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=experiment_management.view_riddle")
        .then((res) => {
          this.canViewAssay = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processPropertyManagementPermission() {
      this.axios
        .get("/has_permission?permission=property_management.view_sample")
        .then((res) => {
          this.canViewSample = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_macro_organization"
        )
        .then((res) => {
          this.canViewMacroStructure = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_micro_structure"
        )
        .then((res) => {
          this.canViewMicroStructure = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_chemical_property"
        )
        .then((res) => {
          this.canViewChemicalProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_physical_property"
        )
        .then((res) => {
          this.canViewPhysicalProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_tensile_property"
        )
        .then((res) => {
          this.canViewTensileMechanicalProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_compress_property"
        )
        .then((res) => {
          this.canViewCompactionMechanicalProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_shear_property"
        )
        .then((res) => {
          this.canViewShearProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_bond_property"
        )
        .then((res) => {
          this.canViewBendingProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_torsional_property"
        )
        .then((res) => {
          this.canViewTorsionProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_fracture_toughness"
        )
        .then((res) => {
          this.canViewFractureProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_frictional_property"
        )
        .then((res) => {
          this.canViewFrictionAndWearProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=property_management.view_hardness")
        .then((res) => {
          this.canViewHardness = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=property_management.view_service_property"
        )
        .then((res) => {
          this.canViewServiceProperty = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processAlloyMaterialPermission() {
      this.axios
        .get("/has_permission?permission=attachment_management.view_alloy")
        .then((res) => {
          this.canViewAlloy = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processAuditPermission() {
      this.axios
        .get(
          "/has_permission?permission=experiment_management.audit_experiment"
        )
        .then((res) => {
          this.canAuditExperiment = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get(
          "/has_permission?permission=experiment_management.audit_experiment_procedure"
        )
        .then((res) => {
          this.canAuditExperimentProcedure = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    processUserManagementPermission() {
      this.axios
        .get("/has_permission?permission=user_management.view_user")
        .then((res) => {
          this.canViewUser = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
      this.axios
        .get("/has_permission?permission=auth.view_user_group")
        .then((res) => {
          this.canViewUserGroup = res.data.result;
        })
        .catch((error) => {
          console.log("Error", error.message);
        });
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    // 选择菜单项时，触发select-item事件
    onSelect(e) {
      //   console.log(e)
      this.$emit("select-item", e);
      //   console.log(e.selectedKeys)
    },
  },
};
</script>
